<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			姓：<input type="text" v-model="firstName"/><br />
			名：<input type="text" v-model="lastName"/><br />
			单项绑定：<input type="text" v-model="fullName1"/><br />
			单项绑定：<input type="text" v-model="fullName2"/><br />
			双向绑定：<input type="text" v-model="fullName3"/><br />
			
			
		</div>
	</body>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				firstName:"A",
				lastName:"B",
				fullName2:"A B"
			},
			computed:{
				fullName1(){
					return this.firstName +" "+this.lastName
				},
				//把fullName3定义成json格式
				fullName3:{
					//返回全新fullName3的值
					get(){
						return this.firstName +" "+this.lastName
					},
					//监视fullName3值的改变，value为fullName3改变后的新值
					set(value){
						var fullName = value.split(" ");
						this.firstName = fullName[0];
						this.lastName = fullName[1];
					}
				}
			},
//			监听方式一：监听这两个值的变化，之后再重新赋值给fullName2
			watch:{
				firstName:function(value){
					this.fullName2 = value + " " + this.lastName
				},
				lastName:function(value){
					this.fullName2 = this.firstName + " " + value
				}
			}
		})
		//监听方式二：监听这两个值的变化，之后再重新赋值给fullName2
//		vm.$watch("firstName",function(value){
//			this.fullName2 = value + " " + this.lastName;
//		})
//		vm.$watch("lastName",function(value){
//			this.fullName2 = value + " " + this.lastName;
//		})
	</script>
</html>
